<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app" :a="a" b="2">
        <div class="one">
            <p>{{count}}</p>
            <p>{{a}}</p>
            <p>{{b}}</p>
        </div>
    </div>
</body>
<script>
    class Mine{
        constructor(options){
            let {el,data,methods} = options;
            this.$options = options;
            this.$el = options;

            let ele = document.querySelector(el);
            let vDom1 = createElement(ele);
            let vDom2 = null;
            console.log(vDom1);
            this.$el = ele;
            var _this = this;

            for(var key in data){
                let defaultValue = data[key];
                Object.defineProperty(data,key,{
                    get:function(){
                        return defaultValue;
                    },
                    set:function(val){
                        defaultValue = val;
                        vDom2 = createElement(ele);
                    }
                })
            }

            for(var key in data){
                Object.defineProperty(this,key,{
                    get:function(){
                        return data[key];
                    },
                    set:function(val){
                        data[key] = val;
                    }
                })
            }
           
            function createElement(ele){
                if(ele.nodeType==1){
                    var attrs = {};
                    for(var i=0;i<ele.attributes.length;i++){
                        var attr = ele.attributes[i];
                        var key  = attr.nodeName;
                        var val = attr.nodeValue;

                        if(key.startsWith(":")||key.startsWith("v-bind:")){
                            val = eval.call(_this,val);
                        }
                        attrs[key] = val;
                    }

                    var list = [];
                    if(ele.childNodes){
                        for(var i=0;i<ele.childNodes.length;i++){
                            var item = ele.childNodes[i];
                            list.push(createElement(item));
                        }
                    }

                    var vNode = {
                        tag:ele.tagName.toLowerCase(),
                        ele:ele,
                        attrs,
                        children:list,
                    }
                }else{
                    var vNode = {
                        tag:"",
                        attrs:{},
                        text:ele,
                    }
                }
                return vNode;
            }

           

        }
    }

    new Mine({
        el:"#app",
        data:{
            a:1,
        }
    })



</script>
</html>